<template>
  <div class="student-list">
    <el-row
      type="flex"
      align="middle"
      justify="space-between"
      class="item"
      v-for="(item, index) in studentList"
      :key="index"
    >
      <div class="nickname">{{ item.account }}</div>
      <el-row type="flex" class="attrs-group">
        <i
          class="items"
          @click="handleClick(item, 'grantBoard')"
          :class="item.grantBoard ? 'connect-on' : 'connect-off'"
        ></i>
        <i
          class="items"
          @click="handleClick(item, 'chat')"
          :class="item.chat ? 'chat-on' : 'chat-off'"
        ></i>
        <i
          class="items"
          @click="handleClick(item, 'audio')"
          :class="item.audio ? 'audio-on' : 'audio-off'"
        ></i>
        <i
          class="items"
          @click="handleClick(item, 'video')"
          :class="item.video ? 'video-on' : 'video-off'"
        ></i>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { roomStore } from '../utils/room'
export default {
  data() {
    return {
      roomStore: roomStore,
      lock: false
    }
  },
  computed: {
    studentList() {
      const userAttrs = this.roomStore.state.users
      const me = this.roomStore.state.me
      if (!me.uid || !this.roomStore.state.rtc.localStream) return []
      let my = null
      userAttrs.forEach(item => {
        if (item.uid == +me.uid) {
          my = item
        }
      })
      const users = []
      if (my) {
        users.push(my)
      }
      const userRtc = this.roomStore.state.rtc.users
      for (let id of userRtc) {
        let user = null
        userAttrs.forEach(item => {
          if (item.uid == +id) {
            user = item
          }
        })
        if (user) {
          users.push(user)
        }
      }
      let data = [...new Set(users)]
      return data.filter(user => +user.role == 2)
    }
  },
  methods: {
    async handleClick(data, type) {
      let me = this.roomStore.state.me
      if (!this.roomStore.state || !me) return
      let targetUser = data
      if (!targetUser) return
      const targetUid = data.uid
      const video = Boolean(data.video)
      const audio = Boolean(data.audio)
      const chat = Boolean(data.chat)
      const grantBoard = Boolean(data.grantBoard)
      if (type === 'video') {
        if (video) {
          await this.roomStore.mute(targetUid, 'video')
        } else {
          await this.roomStore.unmute(targetUid, 'video')
        }
        return
      }

      if (type === 'audio') {
        if (audio) {
          await this.roomStore.mute(targetUid, 'audio')
        } else {
          await this.roomStore.unmute(targetUid, 'audio')
        }
        return
      }

      if (type === 'chat') {
        if (chat) {
          await this.roomStore.mute(targetUid, 'chat')
        } else {
          await this.roomStore.unmute(targetUid, 'chat')
        }
        return
      }

      if (type === 'grantBoard') {
        if (!grantBoard) {
          await this.roomStore.unmute(targetUid, 'grantBoard')
        } else {
          await this.roomStore.mute(targetUid, 'grantBoard')
        }
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.student-list {
  min-width: 280px;
  max-width: 280px;
  .item {
    height: 40px;
  }
  .nickname {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
  }
  .attrs-group {
    .items {
      width: 24px;
      height: 24px;
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
      &.connect-on {
        background-image: url(~@assets/images/live/icon-connect-on.png);
      }
      &.connect-off {
        background-image: url(~@assets/images/live/icon-connect-off.png);
      }
      &.chat-on {
        background-image: url(~@assets/images/live/icon-chat-on.png);
      }
      &.chat-off {
        background-image: url(~@assets/images/live/icon-chat-off.png);
      }
      &.audio-on {
        background-image: url(~@assets/images/live/icon-audio-on.png);
      }
      &.audio-off {
        background-image: url(~@assets/images/live/player_audio_off.png);
      }
      &.video-on {
        background-image: url(~@assets/images/live/icon-video-on.png);
      }
      &.video-off {
        background-image: url(~@assets/images/live/player_video_off.png);
      }
    }
  }
}
</style>
